<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/18
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户成交额</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<div class="layui-body" kit-body="true" style="left: 0px;">
    <div class="r2">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div id="echarts_order" style="width:1300px;height:600px;">
                    </div>
                </div>
            </div>
            <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
            <script type="text/javascript">
                layui.use(['layer', 'form'], function () {
                    var $ = layui.$;
                    var form = layui.form;
                    var myChart = echarts.init(document.getElementById('echarts_order'));
                    var dataArray=[];
                    $.ajax({
                        url: "${pageContext.request.contextPath}/statistics/customerOrder",
                        type: "post",
                        asnyc: false,
                        data:{},
                        dataType: "json",
                        beforeSend: function () {
                            loading = layer.load();
                        },
                        success: function (res) {
                            var res_data = res.data;
                            if (res.code != 0) {
                                layer.closeAll('loading');
                                layer.msg(res.msg);
                                return;
                            }
                            var dataJson = {};  //构建json对象，日期为key 统计数值为value
                            for(var i=0; i < res_data.length;i++ ){
                                dataJson[res_data[i].name] = res_data[i].price;
                            }
                            //构建图表data数组
                            for(var key in dataJson){
                                if(dataJson[key] != null){
                                    dataArray.push([key, dataJson[key]]);
                                }else{
                                    dataArray.push([key, dataJson[key]]);
                                }
                            }
                            console.log(dataArray)
                        },
                        error: function () {
                            layer.msg("服务器梦游去啦!");
                        }
                        ,
                        complete: function () {
                            layer.close(loading);
                            var head=["name","price"];
                            dataArray.unshift(head);
                            myChart.setOption({
                                dataset: {
                                    source: dataArray
                                },
                                title:{text: '客户成交额前十'},
                                grid: {containLabel: true},
                                xAxis: {name: '成交额/元'},
                                yAxis: {type: 'category',name:'客户名'},
                                tooltip:{  //鼠标经过显示提示框
                                    show : true,
                                    trigger: "axis"
                                },
                                toolbox:{  //工具栏
                                    show: true,
                                    feature:{
                                        magicType: {type: ['line', 'bar']},  //图形切换
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                series: [
                                    {
                                        type: 'bar',
                                        // data:dataArray
                                        encode: {
                                            // Map the "amount" column to X axis.
                                            x: 'price',
                                            // Map the "product" column to Y axis
                                            y: 'name'
                                        }
                                    }
                                ]
                            });
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>